<template>
    <div>
        <div class="main container">
            <div class="m-page">
                <div class="p-position">您当前位置：服务超市>写评价</div>
                <div class="p-content">
                    <div class="c-box">
                        <div class="box-title">机构信息</div>
                        <div class="box-form">
                            <el-form ref="form" :model="form" label-width="150px">
                                <el-form-item label="机构名称:">
                                    <el-input v-model="form.name" placeholder="机构名称"></el-input>
                                </el-form-item>
                                <el-form-item label="产品/服务名称:">
                                    <el-input v-model="form.good" placeholder="请输入产品/服务名称"></el-input>
                                </el-form-item>
                                <el-form-item label="顾问姓名">
                                    <el-select v-model="form.adviser" placeholder="请选择顾问姓名">
                                        <el-option label="名字1" value="'1'"></el-option>
                                        <el-option label="名字2" value="'2'"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                    <div class="c-box">
                        <div class="box-title">订单信息</div>
                        <div class="box-form">
                            <el-form ref="form" :model="form" label-width="150px">
                                <el-form-item label="订单编码:">
                                    <el-input placeholder="请输入订单编码" v-model="form.order_code">
                                        <i slot="suffix" class="el-input__icon el-icon-document" @click="click_icon()"></i>
                                    </el-input>
                                    <!-- <el-input v-model="form.order_code"></el-input> -->
                                </el-form-item>
                                <el-form-item label="订单金额:">
                                    <el-input v-model="form.meney" placeholder="请输入订单金额"></el-input>
                                </el-form-item>
                                <el-form-item label="订单内容">
                                    <el-input v-model="form.content" placeholder="请输入订单内容"></el-input>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>

                    <div class="c-box">
                        <div class="box-title">评价</div>
                        <div class="box-form">
                            <div class="f-appraise">
                                <span class="demonstration">服务态度:</span>
                                <el-rate v-model="form.star1"></el-rate>
                                
                            </div>
                            <div class="f-appraise">
                                <span class="demonstration">服务专业:</span>
                                <el-rate v-model="form.star2"></el-rate>
                            </div>
                            <div class="f-appraise">
                                <span class="demonstration">服务响应:</span>
                                <el-rate v-model="form.star3"></el-rate>
                                
                            </div>
                            <div class="f-appraise">
                                <span class="demonstration">性价比:</span>
                                <el-rate v-model="form.star4"></el-rate>
                            </div>

                            <div class="f-describe">
                                <div class="d-title">评价描述:</div>
                                <div class="d-textarea">
                                    <el-input type="textarea" :rows="4" placeholder="我是描述" v-model="form.textarea">
                                    </el-input>
                                </div>
                            </div>

                            <div class="f-btn">
                                <el-button type="primary" @click="submit_btn">提交</el-button>
                            </div>
                        </div>
                    </div>
                </div>

                <el-dialog title="订单列表" :visible.sync="dialogTableVisible">
                    <el-table :data="gridData">
                        <el-table-column property="order_num" label="序号" width="60"></el-table-column>
                        <el-table-column property="time" label="提交时间" width="130"></el-table-column>
                        <el-table-column property="order_code" label="订单号" width="180"></el-table-column>
                        <el-table-column property="order_content" label="订单内容" width="150"></el-table-column>
                        <el-table-column property="money" label="金额" width="100"></el-table-column>
                        <!-- <el-table-column prop="state" label="全部状态" sortable width="100"></el-table-column> -->
                        <el-table-column prop="state" label="全部状态" width="120" 
                        :filters="[{ text: '未支付', value: '未支付' }, { text: '已支付', value: '已支付' }]"
                        :filter-method="filterTag"
                        filter-placement="bottom-end">
                            <template slot-scope="scope">
                                <el-tag
                                :type="scope.row.state === '未支付' ? 'primary' : 'success'"
                                disable-transitions>{{scope.row.state}}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="120">
                            <template slot-scope="scope">
                                <el-button @click.native.prevent="operationRow(scope.$index,gridData)" type="text" size="small">
                                    操作
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页 -->
                    <div class="page">
                        <pagination :msg="page" @refreshList="onRefresList"></pagination>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>
<script>
import pagination from '../../views/localPage/pagination';
export default {
    data() {
        return {
            form: {
                name: '',//机构名称
                good:'',//产品/服务名称
                adviser:'',//顾问姓名
                order_code:'',//订单编码
                meney:'',//订单金额
                content:'',//订单内容
                star1:1,//服务态度
                star2:2,//服务专业
                star3:3,//服务响应
                star4:4,//性价比
                textarea:'',//评价描述
            },
            dialogTableVisible :false,//是否显示弹窗
            gridData: [
                {
                    order_num: '1',
                    time:'2019-06-01',
                    order_code:'FW201904190001',
                    order_content:'xxxxxxxxx',
                    money:'10万元',
                    state:'未支付',
                }, {
                    order_num: '2',
                    time:'2019-06-01',
                    order_code:'FW201904190001',
                    order_content:'xxxxxxxxx',
                    money:'10万元',
                    state:'未支付',
                }, {
                    order_num: '3',
                    time:'2019-06-01',
                    order_code:'FW201904190001',
                    order_content:'xxxxxxxxx',
                    money:'10万元',
                    state:'未支付',
                }, {
                    order_num: '4',
                    time:'2019-06-01',
                    order_code:'FW201904190001',
                    order_content:'xxxxxxxxx',
                    money:'10万元',
                    state:'未支付',
                }
            ],
            page:{
                pagesize:4,
                total:900,
            },
        }
    },
    methods:{
        click_icon(){//订单编码  右侧图标点击
            this.dialogTableVisible=true;
        },
        onRefresList(val){
          console.log(val)
        },
        filterTag(value, row) {//表单筛选
            console.log(value,row)
            return row.state === value;
        },
        operationRow(order,arr){//表单点击操作
            this.form.order_code = arr[order].order_code;
            this.dialogTableVisible=false;
        },
        submit_btn(){//点击提交
            this.$message({
                message: '提交成功',
                type: 'success'
            });
        }
    },
    components:{pagination},
}
</script>
<style>
.el-select{
    width: 100%;
}
.el-rate{
    display: inline-block;
}
.el-button--primary{
    padding: 12px 45px;
}
</style>

<style lang="less">
.m-page{
    padding: 80px 21px 200px 21px;
    font-size: 16px;
    color: #333;
    font-family:MicrosoftYaHei;
    font-weight:400;
    .p-position{
        color: #999999;
    }
    .p-content{
        margin-top: 40px;
        background: #fff;
        padding: 81px 225px;
        .c-box{
            padding: 40px 0;
            border-bottom: 1px solid #E0E0E0;
            .box-title{
                font-weight:bold;
                font-size: 20px;
            }
            .box-form{
                margin-top: 65px;
                // text-align: right;
                padding-left: 85px;
                .f-appraise{
                    display: inline-block;
                    width: 49%;
                    margin-bottom: 40px;
                    .demonstration{
                        margin-right: 5px;
                        vertical-align: middle;
                    }
                }
                .f-describe{
                    margin-top: 30px;
                    .d-title{
                        color: #666;
                    }
                    .d-textarea{
                        margin-top: 20px;
                    }
                }
                .f-btn{
                    margin-top: 70px;
                }
            }
            &:last-child{
                border-bottom: none;
            }
        }
    }
}
</style>
